import { RouterProvider, createBrowserRouter } from "react-router-dom";
import { useContext, Suspense } from "react";
import context from '../../utils/createContext'
import { Observer } from 'mobx-react'
import { Space, Spin } from 'antd';
function Router() {
  const value = useContext(context)
  return (
    <Observer>
      {() => {
        return (
          <div style={{ height: '100%' }}>
            <Suspense fallback={
              <Space direction="vertical" style={{ width: '100%',marginTop:'200px'}}>
                <Spin tip="Loading" size="large" delay={500}>
                  <div className="content" />
                </Spin>
              </Space>
            }>
              <RouterProvider router={createBrowserRouter(value.routerList)} />
            </Suspense>
          </div>
        )
      }}
    </Observer>

  )
}

export default Router